<template>
  <div>
    <el-row>
      <el-button type="primary" @click="openAddDialog">添加资源</el-button>
      <el-input v-model="searchQuery" placeholder="输入资源名称查询" @keyup.enter="searchResources" style="width: 200px; margin-left: 20px;"></el-input>
      <el-button @click="searchResources">查询</el-button>
    </el-row>
    <el-table :data="resources" style="width: 100%; margin-top: 20px;">
      <el-table-column v-for="column in displayColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width"></el-table-column>
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <el-button size="mini" @click="openEditDialog(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteResource(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="添加资源" v-model:visible="addDialogVisible">
      <el-form :model="newResource" :rules="rules" ref="newResourceForm" label-width="100px">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="newResource.name"></el-input>
        </el-form-item>
        <el-form-item label="资源URL" prop="url">
          <el-input v-model="newResource.url"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="addDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addResource">添加</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="编辑资源" v-model:visible="editDialogVisible">
      <el-form :model="editResource" :rules="rules" ref="editResourceForm" label-width="100px">
        <el-form-item label="资源名称" prop="name">
          <el-input v-model="editResource.name"></el-input>
        </el-form-item>
        <el-form-item label="资源URL" prop="url">
          <el-input v-model="editResource.url"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateResource">保存</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="设置显示列" v-model:visible="displayColumnsDialogVisible">
      <el-checkbox-group v-model="selectedColumns">
        <el-checkbox v-for="column in allColumns" :key="column.prop" :label="column.prop">{{ column.label }}</el-checkbox>
      </el-checkbox-group>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="displayColumnsDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="setDisplayColumns">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resources: [], // 资源列表
      searchQuery: '',
      addDialogVisible: false,
      editDialogVisible: false,
      displayColumnsDialogVisible: false,
      newResource: {
        name: '',
        url: ''
      },
      editResource: {},
      allColumns: [
        { prop: 'name', label: '资源名称', width: 180 },
        { prop: 'url', label: '资源URL', width: 240 }
      ],
      selectedColumns: ['name', 'url'],
      rules: {
        name: [
          { required: true, message: '请输入资源名称', trigger: 'blur' }
        ],
        url: [
          { required: true, message: '请输入资源URL', trigger: 'blur' }
        ]
      }
    };
  },
  computed: {
    displayColumns() {
      return this.allColumns.filter(column => this.selectedColumns.includes(column.prop));
    }
  },
  methods: {
    openAddDialog() {
      this.addDialogVisible = true;
    },
    addResource() {
      this.$refs.newResourceForm.validate((valid) => {
        if (valid) {
          this.resources.push({ ...this.newResource });
          this.addDialogVisible = false;
          this.$message.success('资源添加成功');
        }
      });
    },
    openEditDialog(resource) {
      this.editResource = { ...resource };
      this.editDialogVisible = true;
    },
    updateResource() {
      this.$refs.editResourceForm.validate((valid) => {
        if (valid) {
          const index = this.resources.findIndex(r => r.url === this.editResource.url);
          if (index !== -1) {
            this.resources.splice(index, 1, { ...this.editResource });
            this.editDialogVisible = false;
            this.$message.success('资源更新成功');
          }
        }
      });
    },
    deleteResource(resource) {
      this.resources = this.resources.filter(r => r.url !== resource.url);
      this.$message.success('资源删除成功');
    },
    searchResources() {
      // 模拟查询资源
      this.resources = this.resources.filter(resource => resource.name.includes(this.searchQuery));
    },
    setDisplayColumns() {
      this.displayColumnsDialogVisible = false;
      this.$message.success('显示列设置成功');
    }
  },
  mounted() {
    // 模拟加载资源列表
    this.resources = [
      { name: '资源1', url: '/resource1' },
      { name: '资源2', url: '/resource2' }
    ];
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
}
</style>